<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='../function/vue.js'></script>
		<link rel="stylesheet" type="text/css" href="../function/reset.css">
		<style>
			.wrap {
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.battery {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
			.battery_body {
				position: relative;
				width: 200px;
				height: 350px;
				border: 1px solid #e4e4e4;
				border-radius: 20px 20px 12px 12px;
				box-shadow: 0 0 10px #999;
				overflow: hidden;
			}
			.battery_body::after {
				content: '';
				position: absolute;
				display: block;
				top: 90%;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(#7abcff 0%, #00BCD4 44%, #2196F3 100%);
				filter: hue-rotate(90deg);
				animation: charge 10s linear infinite;
			}
			.battery_top {
				position: relative;
				margin: auto;
				width: 42px;
				height: 14px;
				background-color: #d4d4d4;
				border-radius: 6px 6px 0 0;
			}
			.move_wave {
				position: absolute;
				left: 50%;
				width: 500px;
				height: 500px;
				z-index: 10;
				animation: rotate 10s linear infinite;
			}
			.move_wave:nth-of-type(1) {
				background-color: rgba(255, 255, 255, .85);
				border-radius: 40% 43% 46% 44%;
				transform: translate(-50%, -100px) rotateZ(0deg);
			}
			.move_wave:nth-of-type(2) {
				background-color: rgba(255, 255, 255, .8);
				border-radius: 47% 49% 44% 46%;
				transform: translate(-50%, -100px) rotateZ(-100deg);
			}
			.move_wave:nth-of-type(3) {
				background-color: rgba(255, 255, 255, .9);
				border-radius: 39% 49% 46% 41%;
				transform: translate(-50%, -100px) rotateZ(100deg);
			}
			@keyframes charge {
				100% {
					top: 0;
					filter: hue-rotate(0deg);
				}
			}
			@keyframes rotate {
				100% {
					transform: translate(-50%, -100%) rotateZ(720deg);
				}
			}
		</style>
	</head>
	<body>
		<div class='wrap'>
			<div class='battery'>
				<div class='battery_top'></div>
				<div class='battery_body'>
					<div class='move_wave'></div>
					<div class='move_wave'></div>
					<div class='move_wave'></div>
				</div>
			</div>
		</div>
	</body>
</html>